{include file="Public:header" /}

<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>地区列表</h5>
						<div class="ibox-tools">
							<a class="collapse-link">
								<i class="fa fa-chevron-up"></i>
							</a>
							<a class="close-link">
								<i class="fa fa-times"></i>
							</a>
						</div>
					</div>
					<div class="ibox-content">
						<div class="">
							<a href="#" class="btn btn-primary"
								aria-controls="messages" role="button" data-toggle="modal"
								data-target="#myModal">
								<span class="fa fa-plus"></span>
								添加地区
							</a>
						</div>
						<br />
						<div class="table-responsive">
							<table class="table table-bordered table-hover"
								id="categoryTable">
								<thead>
									<tr style="background: #f9f9f9;">
										<th>折叠</th>
										<th>地区名称</th>
										<th>所属父级</th>
										<th>排序</th>
										<th>是否显示</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									{foreach name="locality" item="data"}
									<tr class="level_{$data['level']} pid_{$data['pid']}"
										cid="{$data['lid']}" level="{$data['level']}">
										<td>
											<!-- {$data['html']}
											<a class='btn btn-primary btn-sm unfold' href="#">+</a> -->
										</td>
										<td>{$data['html']}{$data['lname']}</td>
										<td>{$data['pid']}</td>
										<td>{$data['html']}{$data['sort']}</td>
										<td>
										{if condition="$data['is_display'] eq 1"}
											显示
										{else/}
											隐藏
										{/if}
										</td>
										<td class="center">
											<div class="dropdown">
												<button class="btn btn-primary dropdown-toggle"
													type="button" id="dropdownMenu1" data-toggle="dropdown"
													aria-haspopup="true" aria-expanded="true">
													操作
													<span class="caret"></span>
												</button>
												<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
													<li>
														<a role="button" class="btn btn-primary"
															style="margin-bottom: 0px;" group_id="{$data['id']}"
															group_title="{$data['title']}" onclick="editGroup(this)"
															href="#">
															<span class="fa fa-edit"></span>
															修改
														</a>
													</li>
													<li>
														<a role="button" class="btn btn-danger"
															style="margin-bottom: 0px;"
															onclick="deleteLocality(this,{$data['lid']})" href="#">
															<span class="fa fa-trash-o"></span>
															删除
														</a>
													</li>
												</ul>
											</div>
										</td>
									</tr>
									{/foreach}
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">添加地区</h4>
				</div>
				<div class="modal-body">
					<!-- class都是bootstrap定义好的样式，验证是根据input中的name值 -->
					<form action="__URL__/addLocality" method="post" id="defaultForm">

						<div class="form-group">
							<label for="exampleInputMenuName">所属地区</label>
							<select name="pid" style="border-radius: 4px;" class="form-control">
								<option value="">顶级地区</option>
							{foreach name="locality" item="data"}
								<option value="{$data['lid']}">{$data['html']}{$data['lname']}</option>
							{/foreach}
							</select>
						</div>

						<div class="form-group">
							<label for="categoryName">地区名称</label>
							<input type="text" name="lname" style="border-radius: 4px;"
								id="categoryName" class="form-control" />
						</div>

						<div class="form-group">
							<label for="categoryDescription">地区描述</label>
							<textarea name="description" style="border-radius: 4px;"
								class="form-control" id="categoryDescription" /></textarea>
						</div>

						<div class="form-group">
							<label for="categorySort">地区排序</label>
							<input type="number" name="sort" style="border-radius: 4px;"
								id="categorySort" class="form-control" />
						</div>

						<div class="form-group">
							<div class="i-check">
								<label for="exampleInputMenuName">是否显示</label>
								&nbsp;&nbsp;
								<input type="radio" name="is_display" value="1"
									checked="checked" />
								显示&nbsp;
								<input type="radio" name="is_display" value="2" />
								隐藏
							</div>
						</div>

						<div class="modal-footer" id="parent_id">
							<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
							<button type="submit" class="btn btn-primary">提交</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- Modal -->

	{include file="Public:footer" /}

	<script>
$(document).ready(function() {
    /**
     * 下面是进行插件初始化
     * 你只需传入相应的键值对
     * */
    $('#defaultForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {/*输入框不同状态，显示图片的样式*/
            	  valid: 'glyphicon glyphicon-ok',
                  invalid: 'glyphicon glyphicon-remove',
                  validating: 'glyphicon glyphicon-refresh'
            },
            fields: {/*验证*/
            	lname: {/*键名username和input name值对应*/
                    message: '地区名称验证失败',
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '地区名称不能为空'
                        },
                        stringLength: {/*长度提示*/
                            min: 2,
                            max: 30,
                            message: '地区名称长度必须在2到30之间'
                        }/*最后一个没有逗号*/
                    }
                },
                description: {/*键名username和input name值对应*/
                    message: '地区描述验证失败',
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '地区描述不能为空'
                        },
                        stringLength: {/*长度提示*/
                            min: 2,
                            max: 30,
                            message: '地区描述长度必须在2到30之间'
                        }/*最后一个没有逗号*/
                    }
                },
                sort: {/*键名username和input name值对应*/
                    message: '排序验证失败',
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '排序不能为空'
                        },
                        stringLength: {/*长度提示*/
                            min: 1,
                            max: 100,
                            message: '排序长度必须在1到100之间'
                        }/*最后一个没有逗号*/
                    }
                }
            }
            // 还有一个比较常用的就是submitHandler属性，它对应着提交按钮的事件方法。
            // submitHandler: function (validator, form, submitButton) {
                //alert("submit");
               /*  var menu_name = $("input[name='menu_name']").val();
                var link = $("input[name='link']").val();
                var ico = $("input[name='ico']").val();
                $.ajax({
                    url : '__URL__/addMenu',
                    type : 'get',
                    data : {'menu_name' : menu_name, 'link' : link, 'ico':ico},
                    dataType : 'json',
                    success : function(data){
                      alert(data.message);
                    }
                }); */
           // }
        });
});

//修改菜单
function editGroup(obj){
	var group_id = $(obj).attr('group_id');
	var group_title = $(obj).attr('group_title');
	$('#myModal').modal('show');
	$("#defaultForm").attr('action','__URL__/editUserGroup?id='+group_id);
	$("input[name='title']").val(group_title);
}

// window.onload=setTotal();	

//删除
function deleteLocality(obj,lid){
	layer.confirm('确定要删除数据吗',{btn:['确认','取消'], icon:3, closeBtn: 2 },function(index){
		$.ajax({
			url : '__URL__/deleteLocality',
			data : {'lid':lid},
			type : 'get',
			dataType : 'json',
			async : false,   //取消同步，执行完之后再往下执行
			success : function(data){
				if(data.status == 1){				
					layer.msg(''+data.message+'',{icon:2,time:1000});
				}else if(data.status == 2){
					layer.msg(''+data.message+'',{icon:1,time:1000});
					$(obj).parent('li').parent('ul').parent('div').parent('td').parent('tr').remove();
				}else if(data.status == 3){
					layer.msg(''+data.message+'',{icon:2,time:1000});
				} 
			}
		});
	});	
}
</script>

<script>
$(function(){
	return false;
	var aTr = $('#categoryTable tbody tr');
	var aUnfold = $('.unfold');
	aTr.each(function(){
		//取得class名称
		var level = $(this).attr('level');
		if(level>1){
			$(this).addClass('hide');
		}
	});
	var i = 1;
	aUnfold.click(function(){
		if(i == 1){
			var aSonList = getSonList.call(this);
			if(aSonList.size()){
				$(this).html('-');
				aSonList.removeClass('hide');
			}
			i = 2;
		}else if(i == 2){
			var aSonList = getSonList.call(this);
			if(aSonList.size()){
				$(this).html('+');
				aSonList.addClass('hide');
			}	
			i = 1;
		}
	});
	
	/**** 获取子集列表  ****/
	function getSonList(){
		var oParent = $(this).parents('tr');
		var pid = oParent.attr('cid');
		var sClass = '.pid_'+pid;
		return $('#categoryTable tbody').find(sClass);
	}
	
	
});
</script>
</body>
</html>
